<template>
  <!--修改图书-->
  <el-dialog
      title="添加图书"
      :visible.sync="updateDishDialogVisual"
      width="30%"
      @close="handlerUpdateDishDialogClose"
     >
    <el-form
        :model="editDishForm"
        :rules="editDishRules"
        ref="editDishFormRef"
        label-width="100px"
        class="demo-ruleForm">
      <el-form-item label="图书名" prop="title">
        <el-input v-model="editDishForm.title"></el-input>
      </el-form-item>
      <el-form-item label="图书介绍" prop="description">
        <el-input type="textarea" v-model="editDishForm.description"></el-input>
      </el-form-item>
      <el-form-item label="图书价格" prop="price">
        <el-input v-model.number="editDishForm.price"></el-input>
      </el-form-item>
      <el-form-item label="图书分类" prop="dishCategory.cid">
        <el-select
            v-model="editDishForm.dishCategory.cid"
            placeholder="请选择图书分类" class="chooseCategory">
          <el-option
              v-for="category in categoryList"
              :label="category.categoryName"
              :value="category.cid">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
            :action="fileUploadUrl"
            list-type="picture-card"
            :auto-upload="true"
            ref="uploadDishImg"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :on-success="uploadFileSuccess"
            :class="{hideUpload:updateFileList.length===1}"
            name="uploadFile"
            :file-list="updateFileList"
            :limit="1">
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
                <el-button  @click="updateDishDialogVisual=false">取 消</el-button>
                <el-button type="primary" @click="updateDish">确 定</el-button>
            </span>
  </el-dialog>
</template>

<script>
export default {
  name: "UpdateDish",
  data(){
    return{
      updateDishDialogVisual:false,
      //修改图书表单
      editDishForm:{
        title:'',
        description:'',
        dishCategory:{
          cid:'',
          categoryName:''
        },
        price:'',
        imgUrl:''
      },
      //表单校验规则
      editDishRules:{
        title:[{ required: true, message: '请输入图书名', trigger: 'blur' }],
        description:[{ required: true, message: '请输入图书简介', trigger: 'blur' }],
        price:[{ required: true, message: '图书单价不能为空',trigger:'blur'},
          { type: 'number', message: '图书单价必须为数字值',trigger: 'blur'}],
        'dishCategory.cid':[{ required: true, message: '请选择图书分类', trigger: 'blur' }]
      },
      //图书分类数据
      categoryList:[],
      //文件上传数组
      updateFileList:[],
      //显示是否正在加载中
      isLoading:true
    }
  },
    computed:{
      //图书上传地址
      fileUploadUrl(){
        let fileUploadUrl=this.$fileUploadUrl;
          return fileUploadUrl
      }
    }
  ,
  methods:{
    //查询所有分类信息
    async getCategoryList(){
      const {data:res}=await this.$http.get("/category/findCategorys")
      if (res.status!=200)return this.$message.error("查询分类信息失败")
      this.categoryList=res.data
    },
    //修改图书对话框关闭时调用
    handlerUpdateDishDialogClose(){
      this.$refs.editDishFormRef.resetFields();
      this.updateFileList=[];
      this.updateDishDialogVisual=false;
    },
    //图片删除时
    handleRemove(file, fileList) {
      this.updateFileList=[]
    },
    //查看图片
    handlePictureCardPreview(file) {
      this.$bus.$emit("addDishPicturePreview",file.url,true);
    },
    //文件上传成功
    async uploadFileSuccess(resp){
      this.updateFileList=[]
      this.editDishForm.imgUrl=resp.data;
    },
    //文件改变时
    handleChange(file,fileList){
      this.updateFileList.push(file)
    },
    //获取图书详情信息
   async getDishDetailByDid(did){
      const{data:res}=await this.$http.get("/dish/findDishById/"+did);
      if (res.status!=200)return this.$message.error('查询图书信息失败');
      this.editDishForm=res.data;
      this.updateFileList.push({'url':res.data.imgUrl})
    },
    //显示窗口
   async changeUpdateDishDialog(did,status){
        await this.getDishDetailByDid(did);
        this.updateDishDialogVisual=status;
    },
    //更新图书
   async updateDish(){
      const {data:res}=await
          this.$http.put("/dish/updateDish",this.editDishForm);
      this.updateDishDialogVisual=false;
      if (res.status!==200)return this.$message.error("更新图书失败，请稍后重试！");
      this.$message.success("更新图书成功！");
      this.$bus.$emit("updatingDishView")
    }
  },
  mounted() {
    //打开更新图书窗口(绑定事件)
    this.$bus.$on("changeUpdateDishDialog",this.changeUpdateDishDialog);
    this.getCategoryList();
  }
}
</script>

<style scoped>

</style>
